<template>
  <div class="info">
    <pageManage>
      <template #head>
        <div style="margin-right: 10px">
          <a-input v-model:value="searchFun.searchInfo.search" placeholder="搜索角色名称或标识"></a-input>
        </div>
        <a-button type="primary" @click="searchFun.searchClick">
          <SearchOutlined />
          查询
        </a-button>
        <a-button style="margin: 0 15px" @click="searchFun.reset">重置</a-button>
      </template>
      <template #middle>
        <div style="margin-bottom: 15px">
          <a-space :size="8">
            <a-button type="primary" @click="cli_newAdd">
              <PlusOutlined />
              新增
            </a-button>
            <a-button type="primary" danger @click="cli_newDelt">
              <delete-outlined />
              删除
            </a-button>
          </a-space>
        </div>
        <div>
          <a-table
            :columns="table.columns"
            :data-source="portComList"
            :pagination="false"
            :scroll="{ y: table.tableHeight }"
            :row-selection="table.rowSelection"
            :loading="table.loading"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'option'">
                <div>
                  <a-button type="link" danger :size="'small'" @click="table.delRoleToGroup(record)">删除</a-button>
                </div>
              </template>
            </template>
          </a-table>
        </div>
      </template>
      <template #foot>
        <a-pagination
          v-model:current="pagFun.pagInfo.pageNo"
          show-quick-jumper
          :total="pagFun.pagInfo.total"
          :responsive="false"
          @change="pagFun.onChange"
        />
      </template>
    </pageManage>
    <transfer v-if="isShowmytransfer" ref="mytransfer" @after-close="afterClose" @add-success="addSuccess"></transfer>
    <!--删除弹框    -->
    <a-modal v-model:visible="deleteFun.isDelete" title="删除" @ok="deleteFun.deleteOk">
      {{ `确认删除 ${deleteFun.name} 吗 ?` }}
    </a-modal>
  </div>
</template>

<script setup>
import { inject, ref, reactive, onMounted, nextTick, computed, toRefs, defineEmits } from 'vue'
import { DeleteOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import pageManage from '../pageManage'
import factory from '../../factory'
import transfer from './transfercPermi2'
const { currentItemId } = inject('roleParams')
const portComList = ref([])
//==翻页功能======================
const pagFun = reactive({
  pagInfo: { pageNo: 1, pageSize: 10, total: 10 },
  onChange: (page, pageSize) => {
    pagFun.pagInfo.pageNo = page
    pagFun.pagInfo.pageSize = pageSize
    table.getTableData()
  },
})
//==表格================
const table = reactive({
  columns: [
    {
      title: '操作',
      key: 'option',
      width: 120,
    },
    {
      title: '角色名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '角色标识',
      dataIndex: 'key',
      key: 'key',
    },
    {
      title: '来源',
      dataIndex: 'sourceName',
      key: 'sourceName',
    },
  ],
  selectedRows: [],
  rowSelection: {
    checkStrictly: false,
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(1111111)
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
      table.selectedRows = selectedRows
    },
    onSelect: (record, selected, selectedRows) => {
      console.log(222222)
      console.log(record, selected, selectedRows)
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
      console.log(3333333)
      console.log(selected, selectedRows, changeRows)
    },
  },
  loading: false,
  getTableData: (pag = { ...pagFun.pagInfo, privilege: currentItemId.value.key }) => {
    table.loading = true
    factory.getGroupRelRole(pag).then((res) => {
      table.loading = false
      portComList.value = res.data.dataList
      pagFun.pagInfo.total = Number(res.data.totalCount)
    })
  },
  //删除
  delRoleToGroup: (record) => {
    deleteFun.name = record.name
    deleteFun.isDelete = true
    deleteFun.curItem = [record.key]
  },
  tableHeight: 332,
})
table.getTableData()
onMounted(() => {
  let ele = document.getElementsByClassName('perm-detail')
  table.tableHeight = ele[0].offsetHeight - 32 - 55 - 10 - 112 - 62 - 98
})

/***查询功能************************/
const mycascader = ref(null) //重置多级选择
const searchFun = reactive({
  searchInfo: { search: '' },
  searchClick: () => {
    pagFun.pageNo = 1
    let post = { ...pagFun.pagInfo, ...searchFun.searchInfo, privilege: currentItemId.value.key }
    table.getTableData(post)
  },
  reset: () => {
    searchFun.searchInfo = { search: '' }
  },
})

//==添加-==穿梭框mytransfer
const mytransfer = ref(null)
const isShowmytransfer = ref(false)
const cli_newAdd = () => {
  isShowmytransfer.value = true
  nextTick(() => {
    mytransfer.value.visible = true
  })
}
const afterClose = () => {
  isShowmytransfer.value = false
}
const addSuccess = () => {
  table.getTableData()
}
const cli_newDelt = () => {
  if (!table.selectedRows.length) {
    message.warning('请先勾选需要删除的项')
    return
  }
  deleteFun.name = '选中项'
  deleteFun.isDelete = true
  deleteFun.curItem = table.selectedRows.map((m) => {
    return m.key
  })
}

//==删除============================
const deleteFun = reactive({
  name: '',
  isDelete: false,
  curItem: [],
  deleteOk: () => {
    let post = { roles: deleteFun.curItem, privilege: currentItemId.value.key }
    factory.delRoleToGroup(post).then((res) => {
      table.getTableData()
      table.selectedRows = []
      deleteFun.isDelete = false
    })
  },
})
</script>
